<template>
  <div class="main">
    <div class="search">
      <input
        class="input"
        type="text"
        v-model="input"
        @focus="showList = true"
        @blur="showList = false"
        placeholder="请输入城市名称"
      />
      <ul
        class="list"
        :style="{
          display: showList && filteredCities.length > 0 ? 'block' : 'none',
        }"
      >
        <li v-for="city in filteredCities" :key="city" class="city-item">
          {{ city }}
        </li>
        <p v-if="filteredCities.length === 0">似乎没有找到你查找的城市</p>
      </ul>
    </div>
    <div class="CityList">
      <div v-for="city in cities" :key="city" class="citylist-item">
        <div class="left">
          {{ city }}
          <span>25°</span>
        </div>
        <!-- 新增按钮容器 -->
        <div class="right">
          <button class="btn" @click="viewCity">查看</button>
          <button class="btn">删除</button>
        </div>
      </div>
      <h2 class="no-info" v-if="cities.length === 0">
        暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
      </h2>
    </div>
    <h2 class="weather-title">近期天气</h2>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

import { ref, computed } from "vue";

const input = ref("");
const cities = ["北京", "上海"];
// 新增显示状态
const showList = ref(false);

// 修改后的计算属性
const filteredCities = computed(() => {
  if (!input.value.trim()) return [];
  return cities.filter((city) => city.includes(input.value.trim()));
});

const router = useRouter();
const viewCity = () => {
  router.push({ name: "cityinfo" }); // 跳转到子路由
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  margin-top: 0;
  display: flex;
  width: 1216px;
  flex-direction: column;
  justify-content: flex-start; /* 主轴左对齐 */
  align-items: flex-start; /* 交叉轴左对齐 */

  .search {
    width: 100%;
    text-align: inherit;

    .input {
      display: flex;
      position: relative;
      margin: 0 auto;
      width: 100%;
      height: 40px;
      background-color: inherit;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 0;
      box-shadow: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .list {
      list-style: none;
      text-align: inherit;
      padding: 0;
      width: 100%;
      background-color: rgb(0 78 113 / 1);

      .city-item {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        color: yellow;
        background-color: inherit;
        cursor: pointer;
        border-bottom: 1px solid white;
        box-sizing: border-box;
        padding: 0 1rem;
      }
      .city-item:last-child {
        border-bottom: none;
      }
      p {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;

        cursor: pointer;
      }
    }
  }
  .CityList {
    list-style: none;
    width: 100%;
    text-align: inherit;
    padding: 0;
    margin-top: 36px;

    .citylist-item {
      display: flex; // 启用Flex布局
      width: 100%;
      align-items: center;
      justify-content: space-between; // 分布在左右两侧
      height: 40px;
      margin-bottom: 16px;
      border-radius: 5px;
      overflow: hidden; // 防止内容溢出

      .left {
        display: flex;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        align-items: center;
        background-color: rgb(0 78 113 / 1);
        justify-content: space-between;
        padding: 0 1rem;
        flex: 1; // 自动填充剩余空间
        transform: scaleX(1);
        transform-origin: left center;
        transition: transform 0.3s ease;
      }

      .right {
        display: flex;
        display: none;

        button {
          width: 5rem;
          height: 40px;
          margin-right: 10px;
          background-color: rgb(234, 179, 8);
          color: white;
          font-size: 16px;
          border: none;
          cursor: pointer;
        }
      }

      &:hover {
        .left {
          transform: scaleX(0.9);
        }
        .right {
          display: block;
          pointer-events: auto;
        }
      }
    }

    .no-info {
      margin: 0 auto;
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
    }
  }

  .weather-title {
    font-size: 16px;
  }
}
</style>
